import React, { Component } from 'react'
import {withRouter} from "react-router-dom"
import style from "./computed.module.css"
import { Tabs, WhiteSpace } from 'antd-mobile';
 class index extends Component {
    state = {
        val1:"",
        val2:0,
        val3:0,
        val4:0,
        click:true,
        click2:true,
        flag : true,
         tabs2 : [
            { title: '商业贷款', sub: '1' },
            { title: '公积金贷款', sub: '2' },
            { title: '组合贷款', sub: '3' },
          ]
    }
    onchangeinpurt =  (e) => {
            this.state.val1=e.target.value
            this.state.val2=(this.state.val1)*0.3
            this.state.val3=(this.state.val1)*0.7
            // console.log(this.state.val1,"aaa")
            this.setState({})
    }
    onchangeinpurt1 =  (e) => {
        this.state.val2=e.target.value
        this.state.val3= -1*(this.state.val2)
        // console.log(this.state.val1,"aaa")
        this.setState({})
}
onchangeinpurt2 =  (e) => {
    this.state.val3=e.target.value
    // console.log(this.state.val1,"aaa")
    this.setState({})
}
onchangeinpurt3 =  (e) => {
    this.state.val4=e.target.value
    // console.log(this.state.val1,"aaa")
    this.setState({})
}
    render() {
        return (
            <div>
                <div>
                    <div className={style.main}>
                    <h2><span onClick={()=>{
                    this.props.history.push("/list")
                }}>&lt;</span>房贷计算</h2>
              {
                this.state.click&&this.state.click2&& <div>
                        <WhiteSpace />
                        <Tabs tabs={this.state.tabs2}
                            initialPage={0}
                            
                            tabBarPosition="top"
                            renderTab={tab => <span>{tab.title}</span>}
                        >
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f9' }}>
                            <ul>
                        <li><span>房屋首价</span><input value={this.state.val1} onChange={(e)=>{this.onchangeinpurt(e)}} /><i>万元</i></li>
                        <li><span>首付金额</span><input value={this.state.val2}  onChange={(e)=>{this.onchangeinpurt1(e)}}/><i>万元</i></li>
                        <li><span>商代总额</span><input value={this.state.val3} onChange={(e)=>{this.onchangeinpurt2(e)}}/><i>万元</i></li>
                        <li><span>商贷利率</span><i>2015.08.26基准利率</i><b>5.15%</b></li>
                        <li><span>商贷利率</span><i>20年(240期)</i></li>
                        <button onClick={()=>{
                            this.state.click=!this.state.click
                            this.setState({})
                        }}>计算</button>
                    </ul>
               
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',  backgroundColor: '#f5f5f9' }}>
                             
                                <ul>
                        <li><span>房屋首价</span><input value={this.state.val1} onChange={(e)=>{this.onchangeinpurt(e)}} /><i>万元</i></li>
                        <li><span>首付金额</span><input value={this.state.val2}  onChange={(e)=>{this.onchangeinpurt1(e)}}/><i>万元</i></li>
                        <li><span>公积金贷款</span><input value={this.state.val3} onChange={(e)=>{this.onchangeinpurt2(e)}}/><i>万元</i></li>
                        <li><span>公积金利率</span><i>2015.08.26基准利率</i><b>3.25%</b></li>
                        <li><span>贷款年数</span><i>20年(240期)</i></li>
                        <button onClick={()=>{
                            this.state.click=!this.state.click
                            this.setState({})
                        }}>计算</button>
                    </ul>
                               
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f9' }}>
                            <ul>
                        <li><span>房屋总价</span><input value={this.state.val1} onChange={(e)=>{this.onchangeinpurt(e)}} /><i>万元</i></li>
                        <li><span>首付金额</span><input value={this.state.val2}  onChange={(e)=>{this.onchangeinpurt1(e)}}/><i>万元</i></li>
                        <li><span>公积金贷款</span><input value={this.state.val3} onChange={(e)=>{this.onchangeinpurt2(e)}}/><i>万元</i></li>
                        <li><span>公积金利率</span><i>2015.08.26基准利率</i><b>3.25%</b></li>
                        <li><span>商贷利率</span><i>2015.08.26基准利率</i><b>5.15%</b></li>
                        <li><span>贷款年数</span><i>20年(240期)</i></li>
                        <li><span>商品总额</span><input value={this.state.val4} onChange={(e)=>{this.onchangeinpurt3(e)}}/><i>万元</i></li>
                        <button onClick={()=>{
                            this.state.click2=!this.state.click2
                            this.setState({})
                        }}>计算</button>
                    </ul>
                            </div>
                        </Tabs>
                        <WhiteSpace />
                
                  </div>
                 
              }
               </div>
             {/* 计算结果 */}
           {
               !this.state.click&&<div className={style.jisuan}>
                   <h2><span onClick={()=>{
                  this.state.click=!this.state.click
                  this.setState({})
                }}>&lt;</span>计算结果</h2>
                   
                    <div className={style.method}>
                        <dl>等额本息还款方式</dl>
                        <p>贷款总额<span>{this.state.val3}万元</span></p>
                        <p>利息总额<span>2.11万元</span></p>
                        <p>还款总额<span>5.61万元</span></p>
                        <p className={style.bb}>月均还款<span>200元</span></p>
                    </div>
                    <div className={style.method}>
                        <dl>等额本金还款方式</dl>
                        <p>贷款总额<span>{this.state.val3}万元</span></p>
                        <p>利息总额<span>2.11万元</span></p>
                        <p>还款总额<span>5.61万元</span></p>
                        <p>首月还款<span>200元</span></p>
                        <p>末月还款<span>100元</span></p>
                        <p className={style.bb}>每次月还款明细<i className={style.i}>第1期300元</i></p>
                    </div>
                    <button onClick={()=>{
                            this.state.click=!this.state.click
                            // console.log(this.state.val1,this.state.val2,this.state.val3)
                            this.setState({})
                        }}>返回</button>
               </div>
           }
            {
               !this.state.click2&&<div className={style.jisuan}>
                   <h2><span onClick={()=>{
                  this.state.click2=!this.state.click2
                  this.setState({})
                }}>&lt;</span>计算结果</h2>
                   
                    <div className={style.method}>
                        <dl>等额本息还款方式</dl>
                        <p>贷款总额<span>0万元</span></p>
                        <p>利息总额<span>0万元</span></p>
                        <p>还款总额<span>0万元</span></p>
                        <p className={style.bb}>月均还款<span>0元</span></p>
                    </div>
                    <div className={style.method}>
                        <dl>等额本金还款方式</dl>
                        <p>贷款总额<span>0万元</span></p>
                        <p>利息总额<span>0万元</span></p>
                        <p>还款总额<span>0万元</span></p>
                        <p>首月还款<span>0元</span></p>
                        <p>末月还款<span>0元</span></p>
                        <p className={style.bb}>每次月还款明细<i className={style.i}>第1期0元</i></p>
                    </div>
                    <button onClick={()=>{
                            this.state.click2=!this.state.click2
                            // console.log(this.state.val1,this.state.val2,this.state.val3)
                            this.setState({})
                        }}>返回</button>
               </div>
           }
                </div>
            </div>
        )
    }
}
export default  withRouter(index)
 